<template>
  <s-layout title="政策文件" navbar="normal" :bgStyles="{ color: '#f5f5f5' }">
    <!-- Search Bar -->
    <view class="search-bar">
      <view class="search-box">
        <text class="search-icon">🔍</text>
        <input
          v-model="state.searchKeyword"
          class="search-input"
          placeholder="搜索政策文件..."
          @confirm="handleSearch"
        />
      </view>
    </view>

    <!-- Category Tabs -->
    <su-sticky bgColor="#f5f5f5">
      <view class="tab-bar">
        <view
          v-for="(tab, index) in state.tabs"
          :key="index"
          :class="['tab-item', { active: state.activeTab === index }]"
          @tap="handleTabChange(index)"
        >
          {{ tab }}
        </view>
      </view>
    </su-sticky>

    <!-- Featured Policies -->
    <view class="featured-section">
      <view class="section-header">
        <text class="header-icon">📌</text>
        <text class="header-title">重点政策</text>
      </view>
      <view
        v-for="policy in state.featuredPolicies"
        :key="policy.id"
        class="featured-card"
        @tap="handlePolicyClick(policy)"
      >
        <view class="featured-badge">{{ policy.badge }}</view>
        <view class="policy-title">{{ policy.title }}</view>
        <view class="policy-summary">{{ policy.summary }}</view>
        <view class="policy-meta">
          <text class="meta-item">📅 {{ policy.date }}</text>
          <text class="meta-item">👁️ {{ policy.views }}次阅读</text>
        </view>
      </view>
    </view>

    <!-- Policy List -->
    <view class="policy-list">
      <view
        v-for="policy in state.filteredPolicies"
        :key="policy.id"
        class="policy-card"
        @tap="handlePolicyClick(policy)"
      >
        <view class="policy-header">
          <view :class="['policy-type', `type-${policy.type}`]">
            {{ policy.typeText }}
          </view>
          <view v-if="policy.isNew" class="new-badge">NEW</view>
        </view>

        <view class="policy-content">
          <text class="policy-title">{{ policy.title }}</text>
          <text class="policy-subtitle">{{ policy.subtitle }}</text>
          <view class="policy-info">
            <view class="info-item">
              <text class="info-icon">📄</text>
              <text class="info-text">发文单位: {{ policy.department }}</text>
            </view>
            <view class="info-item">
              <text class="info-icon">📅</text>
              <text class="info-text">发布时间: {{ policy.date }}</text>
            </view>
            <view class="info-item">
              <text class="info-icon">📋</text>
              <text class="info-text">文号: {{ policy.docNumber }}</text>
            </view>
          </view>
        </view>

        <view class="policy-footer">
          <view class="footer-stats">
            <text class="stat">👁️ {{ policy.views }}</text>
            <text class="stat">💾 {{ policy.downloads }}</text>
          </view>
          <view class="footer-actions">
            <button class="action-btn" @tap.stop="handleDownload(policy)">
              <text>📥</text>
            </button>
            <button class="action-btn" @tap.stop="handleShare(policy)">
              <text>📤</text>
            </button>
          </view>
        </view>
      </view>
    </view>

    <!-- Load More -->
    <view class="load-more">
      <button class="load-more-btn" @tap="handleLoadMore">加载更多</button>
    </view>
  </s-layout>
</template>

<script setup>
import { reactive, computed } from 'vue'
import sheep from '@/sheep'

const state = reactive({
  searchKeyword: '',
  activeTab: 0,
  tabs: ['全部', '国家政策', '省级政策', '市级政策', '区级政策'],
  featuredPolicies: [
    {
      id: 1,
      title: '新时代文明实践中心建设工作指南',
      summary: '为深入推进新时代文明实践中心建设，规范工作流程，提升服务质量，特制定本工作指南。',
      date: '2024-11-20',
      views: 2856,
      badge: '重点'
    },
    {
      id: 2,
      title: '志愿服务激励保障办法',
      summary: '为激发志愿者服务热情，完善志愿服务激励机制，保障志愿者合法权益，制定本办法。',
      date: '2024-11-15',
      views: 1923,
      badge: '热门'
    }
  ],
  policyList: [
    {
      id: 3,
      title: '关于进一步加强新时代文明实践中心建设的意见',
      subtitle: '中共中央办公厅、国务院办公厅印发',
      department: '中共中央办公厅',
      date: '2024-10-28',
      docNumber: '中办发〔2024〕32号',
      type: 'national',
      typeText: '国家政策',
      isNew: true,
      views: 5420,
      downloads: 856,
      category: '国家政策'
    },
    {
      id: 4,
      title: '志愿服务条例',
      subtitle: '国务院令第685号',
      department: '国务院',
      date: '2024-09-15',
      docNumber: '国务院令第685号',
      type: 'national',
      typeText: '国家政策',
      isNew: false,
      views: 8932,
      downloads: 1542,
      category: '国家政策'
    },
    {
      id: 5,
      title: '省级文明实践中心建设规范',
      subtitle: '省文明办印发',
      department: '省文明办',
      date: '2024-10-05',
      docNumber: '省文明办〔2024〕15号',
      type: 'province',
      typeText: '省级政策',
      isNew: false,
      views: 3256,
      downloads: 625,
      category: '省级政策'
    },
    {
      id: 6,
      title: '市级志愿服务管理办法',
      subtitle: '市文明委印发',
      department: '市文明委',
      date: '2024-09-20',
      docNumber: '市文明委〔2024〕8号',
      type: 'city',
      typeText: '市级政策',
      isNew: false,
      views: 2145,
      downloads: 438,
      category: '市级政策'
    },
    {
      id: 7,
      title: '海城区新时代文明实践工作实施方案',
      subtitle: '区委、区政府印发',
      department: '海城区委',
      date: '2024-08-30',
      docNumber: '海委发〔2024〕12号',
      type: 'district',
      typeText: '区级政策',
      isNew: false,
      views: 1825,
      downloads: 356,
      category: '区级政策'
    },
    {
      id: 8,
      title: '志愿者培训管理规定',
      subtitle: '省文明办、团省委联合印发',
      department: '省文明办、团省委',
      date: '2024-08-15',
      docNumber: '省文明办〔2024〕10号',
      type: 'province',
      typeText: '省级政策',
      isNew: false,
      views: 2634,
      downloads: 512,
      category: '省级政策'
    },
    {
      id: 9,
      title: '文明实践积分管理办法',
      subtitle: '市文明委印发',
      department: '市文明委',
      date: '2024-07-25',
      docNumber: '市文明委〔2024〕5号',
      type: 'city',
      typeText: '市级政策',
      isNew: false,
      views: 3845,
      downloads: 728,
      category: '市级政策'
    }
  ]
})

const filteredPolicies = computed(() => {
  let result = state.policyList

  // Filter by tab
  if (state.activeTab > 0) {
    const category = state.tabs[state.activeTab]
    result = result.filter((p) => p.category === category)
  }

  // Filter by search
  if (state.searchKeyword) {
    result = result.filter((p) => p.title.includes(state.searchKeyword))
  }

  return result
})

state.filteredPolicies = filteredPolicies

const handleSearch = () => {
  console.log('Searching:', state.searchKeyword)
}

const handleTabChange = (index) => {
  state.activeTab = index
}

const handlePolicyClick = (policy) => {
  sheep.$router.go(`/pages/cmt/policy-detail?id=${policy.id}`)
}

const handleDownload = (policy) => {
  uni.showLoading({
    title: '正在下载...'
  })
  setTimeout(() => {
    uni.hideLoading()
    uni.showToast({
      title: '下载成功',
      icon: 'success'
    })
  }, 1500)
}

const handleShare = (policy) => {
  uni.showActionSheet({
    itemList: ['分享到微信', '分享到朋友圈', '复制链接'],
    success: (res) => {
      uni.showToast({
        title: '分享成功',
        icon: 'success'
      })
    }
  })
}

const handleLoadMore = () => {
  uni.showToast({
    title: '加载更多政策中...',
    icon: 'none'
  })
}
</script>

<style lang="scss" scoped>
.search-bar {
  padding: 30rpx;

  .search-box {
    background: white;
    border-radius: 40rpx;
    padding: 20rpx 30rpx;
    display: flex;
    align-items: center;
    gap: 12rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);

    .search-icon {
      font-size: 32rpx;
      color: #ff6b00;
    }

    .search-input {
      flex: 1;
      font-size: 28rpx;
    }
  }
}

.tab-bar {
  background: white;
  margin: 0 30rpx 30rpx;
  border-radius: 24rpx;
  padding: 10rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
  display: flex;
  gap: 10rpx;
  overflow-x: auto;
  white-space: nowrap;

  .tab-item {
    flex-shrink: 0;
    text-align: center;
    padding: 16rpx 32rpx;
    border-radius: 16rpx;
    font-size: 24rpx;
    color: #666;
    background: #f5f5f5;
    transition: all 0.3s;

    &.active {
      background: linear-gradient(135deg, #ff6b00, #ffa726);
      color: white;
      font-weight: bold;
    }
  }
}

.featured-section {
  background: white;
  margin: 0 30rpx 30rpx;
  border-radius: 32rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.08);

  .section-header {
    display: flex;
    align-items: center;
    gap: 12rpx;
    margin-bottom: 24rpx;

    .header-icon {
      font-size: 36rpx;
    }

    .header-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
  }

  .featured-card {
    background: linear-gradient(135deg, #fff3e0, #ffecb3);
    border-radius: 24rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
    position: relative;

    &:last-child {
      margin-bottom: 0;
    }

    .featured-badge {
      position: absolute;
      top: 20rpx;
      right: 20rpx;
      background: linear-gradient(135deg, #ff6b00, #ffa726);
      color: white;
      padding: 8rpx 16rpx;
      border-radius: 20rpx;
      font-size: 20rpx;
      font-weight: bold;
    }

    .policy-title {
      font-size: 30rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 16rpx;
      line-height: 1.4;
      display: block;
      padding-right: 100rpx;
    }

    .policy-summary {
      font-size: 24rpx;
      color: #666;
      line-height: 1.6;
      margin-bottom: 16rpx;
    }

    .policy-meta {
      display: flex;
      gap: 24rpx;
      font-size: 22rpx;
      color: #999;

      .meta-item {
        display: flex;
        align-items: center;
        gap: 8rpx;
      }
    }
  }
}

.policy-list {
  margin: 0 30rpx 30rpx;

  .policy-card {
    background: white;
    border-radius: 32rpx;
    margin-bottom: 30rpx;
    padding: 30rpx;
    box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.08);
    transition: all 0.3s;

    .policy-header {
      display: flex;
      align-items: center;
      gap: 16rpx;
      margin-bottom: 20rpx;

      .policy-type {
        padding: 8rpx 16rpx;
        border-radius: 16rpx;
        font-size: 20rpx;
        font-weight: bold;
        color: white;

        &.type-national {
          background: linear-gradient(135deg, #ff4757, #ff6348);
        }

        &.type-province {
          background: linear-gradient(135deg, #5352ed, #7367f0);
        }

        &.type-city {
          background: linear-gradient(135deg, #1e90ff, #48dbfb);
        }

        &.type-district {
          background: linear-gradient(135deg, #52c41a, #73d13d);
        }
      }

      .new-badge {
        padding: 4rpx 12rpx;
        background: #ff4757;
        color: white;
        border-radius: 12rpx;
        font-size: 18rpx;
        font-weight: bold;
      }
    }

    .policy-content {
      .policy-title {
        font-size: 30rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 12rpx;
        line-height: 1.4;
        display: block;
      }

      .policy-subtitle {
        font-size: 24rpx;
        color: #999;
        margin-bottom: 20rpx;
        display: block;
      }

      .policy-info {
        background: #f8f9fa;
        border-radius: 16rpx;
        padding: 20rpx;

        .info-item {
          display: flex;
          align-items: center;
          gap: 12rpx;
          margin-bottom: 12rpx;

          &:last-child {
            margin-bottom: 0;
          }

          .info-icon {
            font-size: 24rpx;
          }

          .info-text {
            font-size: 24rpx;
            color: #666;
          }
        }
      }
    }

    .policy-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 20rpx;
      padding-top: 20rpx;
      border-top: 1px solid #f0f2f5;

      .footer-stats {
        display: flex;
        gap: 24rpx;

        .stat {
          font-size: 22rpx;
          color: #999;
        }
      }

      .footer-actions {
        display: flex;
        gap: 16rpx;

        .action-btn {
          width: 60rpx;
          height: 60rpx;
          background: #f0f2f5;
          border: none;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 28rpx;
          padding: 0;

          &:active {
            background: #e0e0e0;
          }
        }
      }
    }
  }
}

.load-more {
  text-align: center;
  padding: 40rpx;

  .load-more-btn {
    background: linear-gradient(135deg, #ff6b00, #ffa726);
    color: white;
    border: none;
    padding: 20rpx 50rpx;
    border-radius: 40rpx;
    font-size: 26rpx;
  }
}
</style>
